<template>
  <div class="app-container">
    <el-row>
      <!-- 树 -->
      <el-col :span="4" class="tl-left-tree">
        <el-scrollbar ref="treeScroll" :style="{ height: treeHeight + 'px' }" resizable-key="treeHeight" :resizable-reduce="20" :resizable-refs="['treeSearch']">
					<el-button type="text" size="mini" style="width: 25%" @click="toProvince()">展开到省</el-button>
          <el-button type="text" size="mini" style="width: 25%" @click="toCity()">展开到市</el-button>
          <el-button type="text" size="mini" style="width: 25%" @click="toMatch()">展开到县</el-button>
          <el-tree class="tl-tree" v-if="refreshTree" ref="tree" :data="treeData" node-key="id" :default-expand-all="false" highlight-current :expand-on-click-node="false" :default-expanded-keys="expandArray" @node-click="doTreeQuery" :filter-node-method="filterTreeNode"></el-tree>
        </el-scrollbar>
      </el-col>

      <el-col :span="20">
        <el-card>
          <el-row>
            <!-- 工具栏 -->
            <tl-list-toolbar ref="toolbar" @add="openAddDialog('editForm')" @exportExcel="doExportExcel" @columnCustomize="doColumnCustomize" :isDisplayExport="false" :isDisplayRight="false" :isDisplayDeleteBatch="false" > </tl-list-toolbar>
            <el-row ref="selector">
              <!-- 列表选择 -->
              <div class="table-alert-div">
                <el-alert type="success" :closable="false" class="tl-table-alert-info" effect="light">
                  <template slot="title">
                    已选择&nbsp;<a style="font-weight: bold;">{{ selectedRowKeys.length }}</a
                    >项&nbsp;&nbsp;
                    <a style="font-weight: bold;margin-left: 24px" @click="doClearSelected">全部清空</a>
                  </template>
                </el-alert>
              </div>
            </el-row>
            <el-row>
              <el-table ref="mainTable" class="tl-table" :height="tableHeight" resizable-key="tableHeight" :resizable-reduce="42" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" style="width: 100%;" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName" :default-sort="{ prop: 'code', order: 'ascending' }">
                <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
                <el-table-column prop="dispdeptcommoncode1" label="省区" width="100px" sortable="custom" sort-by="deptcommoncode1" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="dispmarketingpost" label="行销岗位" width="100px" sortable="custom" sort-by="marketingpost" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="postusercodes" label="岗位人员工号" min-width="200px" sortable="custom" sort-by="postusercodes" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="postpostusernames" label="岗位人员姓名" min-width="300px" sortable="custom" sort-by="postpostusernames" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="dispproductline" label="对接产品线" min-width="300px" sortable="custom" sort-by="dispproductline" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="description" label="备注" width="100px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="enabled" label="有效" width="75px" sortable="custom" sort-by="enabled" align="center" header-align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled === 1" type="success">是</el-tag>
                    <el-tag v-else type="danger">否</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="70px" v-slot="scope" fixed="right">
                  <el-dropdown trigger="hover">
                    <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                    <el-dropdown-menu>
                      <el-dropdown-item icon="el-icon-view" @click.native="openViewDialog('editForm', scope.row.id)">查看</el-dropdown-item>
                      <el-dropdown-item icon="el-icon-edit" @click.native="openEditDialog('editForm', scope.row.id)">编辑</el-dropdown-item>
                      <el-dropdown-item icon="el-icon-delete" @click.native="doDelete(scope.row.id)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-table-column>
              </el-table>
            </el-row>
            <!-- 列表分页 -->
            <el-row class="pagebar" ref="pager">
              <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
      <!-- 编辑界面 -->
      <tl-edit ref="editForm" @refresh="doAllRefresh"></tl-edit>
    </el-row>
  </div>
</template>
<script>
/** mixins */
import { mixin_tree_list } from "@tapui/mixins/mixin_tree_list"
import { validateNull } from '@tapui/utils/validate'
/** 工具类**/
import { getAction, putAction, postAction, deleteAction } from "@tapui/utils/http"

/** 子组件 */
import tlEdit from "./edit"
export default {
  name: "mmsProvinceMarketingInfo",
  mixins: [mixin_tree_list],
  components: { tlEdit },
  data() {
    return {
      urlPrefix: "/mms/provinceMarketingInfo/",
      url: {
        queryCodeList: "/mms/provinceMarketingInfo/dataCodeList",
        list: "/mms/provinceMarketingInfo/list", // 列表url
        queryTree: "/mms/provinceCityMatchinfo/queryTreeList" // 根据权限获取树节点
      },
      codeModel: {},
      // 排序参数
      sorterInfo: {
        sidx: "sortcode",
        sord: "desc"
      },
			refreshTree: true,
      expandArray: [],
      // 数列表关联字段
      treeQueryKey: "qry_deptcommoncode1"
    }
  },
  methods: {
		/** 加载列表数据 */
    loadList(paramMap) {
      if (!this.url.list) {
        this.$tap.alert('请设置list地址!', 'warning')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (validateNull(paramMap) === false && Object.keys(paramMap).indexOf('currentPage') > -1) {
        this.pageInfo.currentPage = paramMap['currentPage']
      }
      // 查询条件
      if (!this.beforeLoadData()) return
      var params = this.getQueryParams()
      this.doListQuery(params)
			this.toProvince()
    },
		// 展示到省级
    toProvince() {
      this.expandArray = []
      // 直接用一级部门级数据
			if (this.treeData[0].children === null) {
         return
			}
      this.treeData[0].children.forEach((topitem) => {
        this.expandArray.push(topitem.id)
      })
      this.$nextTick(() => {
        this.refreshTree = true
      })
      this.refreshTree = false
    },
		// 展示到市级
    toCity() {
      this.expandArray = []
      // 直接用一级部门级数据
			if (this.treeData[0].children === null) {
         return
			}
      this.treeData[0].children.forEach((topitem) => {
        if (topitem.children.length > 0) {
          // 遍历一级部门下省级数据
          topitem.children.forEach((provinceitem) => {
            // if (provinceitem.treeFullData.arealevel === '0') {
              this.expandArray.push(provinceitem.id)
            // }
          })
        }
      })
      this.$nextTick(() => {
        this.refreshTree = true
      })
      this.refreshTree = false
    },
		// 展示到县级
    toMatch() {
      this.expandArray = []
      this.$set(this.queryTreeParam, 'qry_name', '')
      // 直接用一级部门级数据
			if (this.treeData[0].children === null) {
         return
			}
      this.treeData[0].children.forEach((topitem) => {
        if (topitem.children.length > 0) {
          // 遍历一级部门下省级数据
          topitem.children.forEach((provinceitem) => {
						if (provinceitem.children !== null) {
            if (provinceitem.children.length > 0) {
              // 遍历省级下市级数据
              provinceitem.children.forEach((cityitem) => {
                // if (cityitem.treeFullData.arealevel === '1') {
                  this.expandArray.push(cityitem.id)
                // }
              })
            }
						} else {
               this.expandArray.push(provinceitem.id)
						}
          })
        }
      })
      this.$nextTick(() => {
        this.refreshTree = true
      })
      this.refreshTree = false
    },
    // 将当前Node的id替换为code,否则doListQuery()只会根据id即省区的cbodept里的id进行查询
    beforeLoadData() {
      this.selectTreeNode.id = this.selectTreeNode.code //
      return true
    },

    // 打开新增对话框之后
    afterOpenAddDialog(editForm, rowData) {
      if (rowData) {
        this.$set(this.$refs[editForm].model, "dispparentid", rowData.name)
        this.$set(this.$refs[editForm].model, "parentid", rowData.id)
      } else {
        if (this.selectTreeNode && this.selectTreeNode.id > 0) {
          this.$set(this.$refs[editForm].model, "dispparentid", this.selectTreeNode.name)
          this.$set(this.$refs[editForm].model, "parentid", this.selectTreeNode.id)
        }
      }
    }
  }
}
</script>
<style></style>
